import React, { useState, useLayoutEffect, useCallback } from "react";
import { connect } from 'react-redux'
import { Space, Table, Tag, Button, Drawer, Popconfirm, message, Image } from 'antd';
import { useNavigate } from "react-router-dom";
import request, { baseUrl } from "../../../utils/request";

function Userlist(props) {
    // console.log('props', props);
    const navigate = useNavigate()
    const [userData, setUserData] = useState([])
    const [delData, setDelData] = useState('')
    const confirm = useCallback(async function (val) {
        // console.log(val);
        const delData = await request.delete('/user/del', {
            params: {
                id: val.id
            }
        })
        setDelData(delData.data.delId)



    }, [])
    // console.log(delData);
    const cancel = (e) => {
        message.error('中断删除');
    };
    useLayoutEffect(() => {
        request.get('/user/list').then(({ data }) => {
            console.log(data.regdata);
            const userdatas = data.regdata.data
            userdatas.map((item, idx) => {
                item.key = item.id
                item.name = item.username
                item.age = item.age || '隐私'
                item.address = item.address || '隐藏了地址'
            })

            setUserData(userdatas)

        })


    }, [delData])
    const columns = [
        {
            title: '名字',
            dataIndex: 'name',
            key: 'name',

        },
        {
            title: '年纪',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '爱好',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, { tags }) => {
                // console.log(data.tags);
                tags = tags.split(' ') || []
                return <>
                    {
                        tags.map((tag) => {
                            let color = tag.length > 5 ? 'geekblue' : 'green';

                            if (tag === 'loser') {
                                color = 'volcano';
                            }

                            return (
                                <Tag color={color} key={tag}>
                                    {tag.toUpperCase()}
                                </Tag>
                            );
                        })
                    }
                </>
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Popconfirm
                        title="你确定要删除吗"
                        onConfirm={confirm.bind(null, record)}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="返回"
                    >

                        <a><Button >删除</Button></a>
                    </Popconfirm>
                    <a><Button onClick={changeUser.bind(null, record)} >编辑</Button></a>

                </Space>
            ),
        },
    ];

    const changeUser = useCallback((val) => {
        console.log(val);
        navigate('/manage/home/user/edit')
    })
    return (
        <div>
            <Table columns={columns} dataSource={userData} />
        </div>
    )
}

// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    // console.log('mapStateToProps', state);
    return {}
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        delUser() {
            dispatch({ type: 'del' })
        }
    }
}
Userlist = connect(mapStateToProps, mapDispatchToProps)(Userlist)

export default Userlist